<template>
  <div class="main">
    
    <div class="main-wrap">
        <!-- 电脑端内容 -->
        <div v-if="!isMobile">
            <!-- header -->
            <PcHeader :special="true"></PcHeader>

            <!-- banner -->
            <PcBanner></PcBanner>

            <!-- 产品介绍图 -->
            <div class="content">
                <div class="container">
                    <!-- splashDrone展示 -->
                    <div class="splashDrone">
                        <div class="left">
                            <div class="top">
                                <p class="title">SPLASH3+</p>
                                <p>Ultimate Waterproof Drone Platform</p>
                            </div>
                            <div class="center">
                                <img src="~/static/SD3+PL3-2.png" alt="" >
                            </div>
                            <div class="bottom">
                               <div class="bottom-wrap">
                                   <p v-for="(item, index) in title" :key="index" @mouseover="active(index)" :class="{'active': index == title_index}">
                                       {{item}} 
                                       
                                    </p>
                               </div>
                            </div>
                        </div>
                        <div class="right"> 
                            <img :src="title_img[title_index]" alt="">
                            <div class="mask">
                                <p>Drop fishing baits beyond the surf line with the most advanced waterproof fishing drone and a dedicated release mechanism</p>
                                <a href="">Learn More</a>
                            </div>
                        </div>
                    </div>

                    <!-- spry展示 -->
                    <div class="spry">
                        <div class="right">
                            <img src="~/static/surf copy.png" alt="">
                            <div class="mask">
                                <p>Drop fishing baits beyond the surf line with the most advanced waterproof fishing drone and a dedicated release mechanism.</p>
                                <a href="">Learn More</a>
                            </div>
                        </div>
                        <div class="left">
                            <div class="top">
                                <p class="title">SPRY</p>
                                <p>The first waterproof sports drone</p>
                            </div>
                            <div class="bottom">
                                <img src="~/static/SPRY.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 网站功能模块 -->
            <div class="function">
                <div class="container">
                    <div class="item">
                        <div>
                            <i class="iconfont icon-biaodan"></i>
                            <p class="title">After Sales Service</p>
                            <p>Sample text</p>
                            <a href="">Learn More ></a>
                        </div>
                    </div>
                    <div class="item">
                        <div>
                            <i class="iconfont icon-hezuo"></i>
                            <p class="title">Proxy</p>
                            <p>Sample text</p>
                            <a href="">Learn More ></a>
                        </div>
                    </div>
                    <div class="item">
                        <div>
                            <i class="iconfont icon-news"></i>
                            <p class="title">News</p>
                            <p>Sample text</p>
                            <a href="">Learn More ></a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 邮件订阅功能 -->
            <div class="subscribe">
                <p>Get news, product updates & special offers</p>

                <div class="form">
                    <div>
                        <input type="text" placeholder="Enter your email address">
                        <button>SUBSCRIBE</button>
                    </div>
                </div>
            </div>

            <PcFooter></PcFooter>
        </div>

        <!-- 移动端内容 -->
        <div v-else :class="['mobile', { 'mobile__open': isMenuOpen }]">
            <!-- 移动端头部 -->
            <mobileHeader :special="isChangeHeaderBack" @menuOpenChange="menuOpenChange"></mobileHeader>
            
            <!-- 移动端banner -->
            <MobileBanner></MobileBanner>

            <div class="products">
                <div class="products--splashDrone">
                    <div class="products--splashDrone-wrap">
                        <div class="products--splashDrone__description">
                            <p class="products--splashDrone__title">SplashDrone 3+</p>
                            <p class="products--splashDrone__common">Ultimate Waterproof Drone Platform</p>
                            <a href="">Learn More</a>
                        </div>
                        <div class="products--splashDrone__img">
                            <img :src="item" alt="" v-for="(item, index) in mobile_img" :key="index" v-if="index === title_index">

                            <div class="titles">
                                <p v-for="(title, index) in title" :key="index" :class="{'title_active' : index === title_index}" @click="active(index)">
                                    {{title}}
                                </p>
                            </div>

                            <div class="sp_back_wrap">
                                <img :src="item" alt="" v-for="(item, index) in mobile_back_img" :key="index" v-show ="index === title_index" class="sp_back">
                            </div>

                        </div>
                    </div>
                </div>

                <div class="spry">
                    <div class="spry-wrap">
                        <div class="spry__description">
                            <p class="spry__title">SplashDrone 3+</p>
                            <p class="spry__common">Ultimate Waterproof Drone Platform</p>
                            <a href="">Learn More</a>
                        </div>
                    </div>

                    <div class="spry__img">
                        <img src="//cdn.swellpro.cn/newSite/mobile/Bitmap@2x.png">

                        <div class="sp_back_wrap">
                            <img src="//cdn.swellpro.cn/newSite/mobile/Group 18@2x.jpg" class="sp_back">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mobile-function">
                <div class="item">
                    <div>
                        <i class="iconfont icon-biaodan"></i>
                        <p class="title">After Sales Service</p>
                        <p>Sample text</p>
                        <a href="">Learn More ></a>
                    </div>
                </div>
                
                <div class="item">
                    <div>
                        <i class="iconfont icon-hezuo"></i>
                        <p class="title">Proxy</p>
                        <p>Sample text</p>
                        <a href="">Learn More ></a>
                    </div>
                </div>

                <div class="item">
                    <div>
                        <i class="iconfont icon-news"></i>
                        <p class="title">News</p>
                        <p>Sample text</p>
                        <a href="">Learn More ></a>
                    </div>
                </div>
            </div>

            <div class="mobile-subscribe">
                <input type="text" placeholder="Enter your email address">

                <button>SUBSCRIBE</button>
            </div>

            <!-- <div  :class="['mobile-mask', { 'mobile-mask__open': isMenuOpen }]">
            </div> -->

            <MobileFooter></MobileFooter>
        </div>
    </div>

  </div>
</template>

<script>
import Http from '~/plugins/http'
import PcHeader from '~/components/pc/common/swellpro-header'
import PcBanner from '~/components/pc/banner'
import PcFooter from '~/components/pc/common/swellpro-footer'
import MobileBanner from '~/components/mobile/banner'
import mobileHeader from '~/components/mobile/common/swellpro-header'
import MobileFooter from '~/components/mobile/common/swellpro-footer'
export default {
    layout: 'index',

    data() {
        return {
            isMenuOpen: false, // 是否显示下拉菜单
            // isMobile: this.$isMobile,
            title_index: 2,
            texts:['', '', '', ''],
            title: ['FISHING', 'FILMING', 'BOATING', 'RESCUE'],
            title_img: ['https://cdn.swellpro.com/newSite/fishing.jpg', 'https://cdn.swellpro.com/newSite/FILMING.jpg', 'https://cdn.swellpro.com/newSite/BOATING.jpg', 'https://cdn.swellpro.com/newSite/RESCUE.jpg'],
            mobile_img: ['//cdn.swellpro.cn/newSite/mobile/mobile-splashDrone.png', '//cdn.swellpro.cn/newSite/mobile/SD3+.77@2x.png', '//cdn.swellpro.cn/newSite/mobile/SD4+.png', '//cdn.swellpro.cn/newSite/mobile/SD3+.79@2x.png'],
            mobile_back_img: ['//cdn.swellpro.cn/newSite/mobile/Group Copy 2@2x.jpg', '//cdn.swellpro.cn/newSite/mobile/Group Copy 4@2x.jpg', '//cdn.swellpro.cn/newSite/mobile/Group Copy 7@2x.jpg', '//cdn.swellpro.cn/newSite/mobile/Group 18@2x.jpg']
        }
    },

    async asyncData({ isMobile }) {
        // const {
        //     http,
        //     api: { topics }
        // } = Http
        return { isMobile }
        // const { data, error } = await http.request(topics)
    },

    computed: {
        isChangeHeaderBack() {
            return !this.isMenuOpen
        }
    },

    mounted() {

    },

    components: {
        PcHeader, PcBanner, mobileHeader, MobileBanner, PcFooter, MobileFooter
    },

    methods: {
        /**
        * 鼠标移动激活 
        */
        active(flag) {
            this.title_index = flag
        },

        /**
        * 菜单栏下拉状态改变 
        * @param { Boolean } isMenuOPen true => 下拉 false => 关闭
        */
        menuOpenChange(isMenuOPen) {
            this.isMenuOpen = isMenuOPen
        }
    }
}
</script>
<style lang='stylus'>
pxToVw(px)
    return unit(px / 7.5 * 2, 'vw')
pxToVh(px)
    return unit(px / 7.5 * 2, 'vh')
.content
    background rgba(233,233,233,1)
    padding-bottom 50px
    .container
        >div
            padding-top 50px
            display flex
        .splashDrone
            .left
                background #fff
                flex 0 0 490px
                position relative
                .top
                    padding 45px 0 45px 45px
                    .title
                        font-size 30px
                        font-weight 600
                    p
                        font-size 22px
                        color #262626
                .center
                    padding-top 30px
                    width 100%
                    height 230px
                    overflow hidden
                    img
                        width 100%
                        height 100%
                        transition all .3s
                        transform scale(1)
                    .active
                        transform scale(1.2)
                .bottom
                    position absolute
                    left 0px
                    bottom 0px
                    width 100%
                    padding 15px 0
                    &-wrap
                        width 310px
                        margin 0 auto
                        display flex
                        justify-content space-around
                        p
                            line-height 15px
                            font-size 12px
                            cursor pointer
                            color #8c8c8c
                        .active
                            color #262626
                            font-weight 400
        >div
            .right
                flex 0 0 710px
                position relative
                overflow hidden
                img
                    display block
                .mask
                    position absolute
                    left 0px 
                    bottom 0px
                    padding 30px 50px
                    background rgba(0,0,0,.53)
                    width 100%
                    color #fff
                    box-sizing border-box
                    p
                        font-size 14px
                    a
                        color #F15E2A
                        font-size 14px
                        padding-top 5px
                        display block
        .spry
            .right
                flex 0 0 640px
                img
                    display block
                    height 440px
            .left
                flex 0 0 560px
                background #3A3A3A
                .top
                    box-sizing border-box
                    padding 50px 0 0 25px
                    color #ffffff
                    .title
                        font-size 30px
                        font-weight 600
                    p
                        font-size 22px
                .bottom
                    padding-top 120px
                    img
                        display block
                        width 100%
.function
    background #1A1A1A
    padding 78px 0
    color #D3D3D3
    .container
        display flex
        .item
            flex 1
            display flex
            justify-content center
            align-items center
            >div
                i
                    color #EBEBEB
                    font-size 25px
                    text-align center
                    display block
                    padding-bottom 10px
                .title
                    font-size 20px
                    text-align center
                p
                    padding-bottom 6px
                    text-align center
                    font-size 14px
                a
                    color #F15E2A
                    font-size 14px
                    display block
                    text-align center
.subscribe
    padding 30px 0
    text-align center
    p
        font-size 18px
        margin-bottom 20px 
    .form
        width 100%
        display flex
        justify-content center
        div
            display block
            input
                width 423px
                height 45px
                padding 0px
                margin 0px
                padding-left 20px
                font-size 13px
                font-weight 300
                color #8B989E
            button
                color #fff
                height 49px
                padding 0 10px
                background #F15E2A
                border none
                font-size 13px
                font-weight 300
                margin-left -6px
                letter-spacing 2px
                cursor pointer
.products
    background rgba(245, 245, 245, 1)
    &--splashDrone
        padding pxToVw(10) 0
        &-wrap
            width 100%
            // height pxToVw(388)
            background #fff
            padding-top pxToVw(26)
        &__description
            color #262626
            text-align center
            a
                color #F15E2A
                padding pxToVw(5) pxToVw(18)
                font-size pxToVw(14)
                border 1px solid #F15E2A
                border-radius 20px
                display block
                width pxToVw(105)
                margin pxToVw(12) auto
        &__title
            font-size pxToVw(24)
            font-weight 600
            line-height pxToVw(34)
        &__common
            line-height pxToVw(21)
        &__img
            >img
                padding pxToVw(30) 0 pxToVw(20)
                display block
                width 100%
                height pxToVw(167)
    .titles
        width pxToVw(254)
        height pxToVw(18)
        line-height pxToVw(18)
        display flex
        margin 0 auto
        justify-content space-between
        p
            color #8C8C8C
            font-weight 300
            font-size pxToVw(13)
            position relative
        .title_active
            font-weight 800
            color #000
            position relative
            &:before
                position absolute
                content ''
                left 0
                width 50%
                bottom pxToVw(-7)
                height pxToVw(1.5)
                background #000
                transform translate3d(50%,0,0)
    .sp_back_wrap
        position relative
        .sp_back
            width 100%
            height pxToVw(233)
            padding-top pxToVw(20)
            display block
    .spry
        margin-bottom pxToVw(10)
        background #000
        &-wrap
            width 100%
            background #000
            padding-top pxToVw(26)
        &__description
            color #262626
            text-align center
            a
                color #F15E2A
                padding pxToVw(5) pxToVw(18)
                font-size pxToVw(14)
                border 1px solid #F15E2A
                border-radius 20px
                display block
                width pxToVw(105)
                margin pxToVw(12) auto
        &__title
            font-size pxToVw(24)
            font-weight 600
            line-height pxToVw(34)
            color #fff
        &__common
            line-height pxToVw(21)
            color #fff
        &__img
            >img
                padding pxToVw(30) 0 pxToVw(20)
                display block
                width 100%
                height pxToVw(167)
.mobile-function
    background #1A1A1A
    padding-bottom pxToVw(40)
    margin-bottom pxToVw(10)
    .item
        padding-top pxToVw(40)
        width 100%
        display flex
        justify-content center
        .title
            font-size pxToVw(21)
        p
            color #D3D3D3
            font-size pxToVw(18)
            margin-top pxToVw(5)
            text-align center
        a
            margin-top pxToVw(5)
            font-size pxToVw(13)
            color #F15E2A
            display block
            text-align center
    i
        color #D3D3D3
        font-size pxToVw(32)
        text-align center
        display block
.mobile-subscribe
    padding pxToVw(25) pxToVw(30)
    input
        display block
        width 100%
        height pxToVw(40)
        line-height pxToVw(40)
        font-size pxToVw(13)
        font-weight 300
        color #838E94
        padding-left pxToVw(8)
        border 1px solid #E3E4E4
        box-shadow none
        -webkit-appearance none
        -webkit-user-select text
        outline-width 0px
        outline-style none
        margin-bottom pxToVw(15)
        box-sizing border-box
    button
        color #fff
        height pxToVw(38)
        line-height pxToVw(38)
        background #F15E2A
        border none
        font-size pxToVw(13)
        font-weight 300
        letter-spacing 2px
        cursor pointer
        width 100%
.main
    position relative
</style>    